<template>
	<div class="write-index">
		<textarea class="write-card card-editer md" v-model="editerHtml" @input="inputEditMd"> </textarea>
		<div ref="previewHtml" id="card-preview" class="write-card card-preview html"></div>
	</div>
</template>

<script setup lang="ts">
import { marked, renderer } from '@/utils/handleMarked/defaultHandle';
import axios from 'axios';
import { ref, onMounted, nextTick, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useMdStore } from '@/store/md';
import { storeToRefs } from 'pinia';

const mdStore = useMdStore();

let { mdContent, defaultMdContent, defaultMdPreviewContent } = storeToRefs(mdStore);
console.log(mdContent.value, defaultMdContent.value, 'mdContent');

//编辑
let editerHtml = ref('');
//预览
let previewHtml = ref('');

//编辑md事件
const inputEditMd = (e: any) => {
	const markdownText = e.target.value;
	previewHtml.value.innerHTML = marked(markdownText, { renderer: renderer });
};

//监听ctrl+s事件
document.addEventListener('keydown', function (e) {
	if (e.keyCode == 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
		e.preventDefault();
		ElMessage.success('保存成功~');
	}
});

//Hook
onMounted(async () => {
	await mdStore.getInitContent();
	nextTick(() => {
		editerHtml.value = defaultMdContent.value;
		previewHtml.value.innerHTML = defaultMdPreviewContent.value;
	});

	// axios.get('/public/echarts疑难杂症.md').then((res) => {
	// 	nextTick(() => {
	// 		editerHtml.value = res.data;
	// 		const markdownText = res.data;
	// 		previewHtml.value.innerHTML = marked(markdownText, { renderer: renderer });
	// 	});
	// });
});
</script>

<style lang="scss">
.write-index {
	display: flex;
	.write-card {
		flex: 1;
		&:first-child {
		}
		&:last-child {
			background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.07) 3%, transparent 0), linear-gradient(1turn, rgba(50, 0, 0, 0.07) 3%, transparent 0);
			background-size: 20px 20px;
			background-position: 50%;
		}
	}
}

.card-editer {
	border: none;
	border-color: red;
	outline: none;
	resize: none;
	padding: 20px;
	border-right: 1px solid #b8b8b8;
}

.card-preview {
	padding: 20px;
}

// 用户信息区域
.user-info {
	display: flex !important;
	&-span {
		flex: 1;
		margin-left: 52px;
	}
	&-avatar {
		height: 100px;
		width: 100px;
	}

	&-item {
		padding-right: 8px;
		margin-right: 2px;
		border-right: 2px solid #b8b8b8;
		line-height: 30px;
		margin: 0 5px;
	}

	&-name {
		display: block;
		font-size: 26px;
		font-weight: bold;
		border-right: none;
	}

	&-email {
		border-right: none;
	}

	.div-ohter {
		line-height: 72px;
	}
}

//hr
.div-hr {
	display: flex;
	height: 4px;
	margin: 10px 0;
	background: #cfcfcf;
	div {
		width: 20%;
		background: #292929;
		height: 4px;
	}
}

h2 {
	margin: 30px 0;
}

//用户 求职意愿
.intended-position {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	// padding: 0 1%;
}

//教育背景
.education-background {
	// display: flex;
	// justify-content: space-evenly;
	.education-background-item {
		display: flex;
		justify-content: space-between;
		// padding: 0 1%;
	}

	.education-desc {
		margin-top: 10px;
	}
}

//技能特长
.skills-info {
	display: flex;
	flex-direction: column;
	&-item {
		padding: 6px 28px;
		word-break: break-all;
	}
}
</style>
